<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .demo-table-expand {
            font-size: 0;
        }
        .demo-table-expand label {
            width: 90px;
            color: #99a9bf;
        }
        .demo-table-expand .el-form-item {
            margin-right: 0;
            margin-bottom: 0;
            width: 50%;
        }




    </style>

</head>
<body>
<div id="app4">
    <el-container>
        <!--我的预约折叠栏-->
        <el-drawer
                title="我的预约"
                :visible.sync="drawer1"
                :direction="direction1"
                :before-close="handleClose1"
                :size="size">
        <span>
            <el-table
                    :data="bookFieldTableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"
                    style="width: 100%"
                    max-height="500">
    <el-table-column
            label="用户ID"
            prop="userid">
    </el-table-column>
    <el-table-column
            label="场地名"
            prop="fieldname">
    </el-table-column>
     <el-table-column
             label="预定时间"
             prop="bookday">
    </el-table-column>
      <el-table-column
              label="开始时间"
              prop="starttime">
    </el-table-column>
     <el-table-column
             label="结束时间"
             prop="endtime">
    </el-table-column>
     <el-table-column
             label="审核状态"
             prop="fieldbookstate">
    </el-table-column>
    <el-table-column
            align="right">
      <template slot="header" slot-scope="scope">
        <el-input
                v-model="search"
                size="mini"
                placeholder="输入关键字搜索"/>
      </template>
      <template slot-scope="scope">
        <el-button
                size="mini"
                @click="handleEnter(scope.$index, scope.row)">使用</el-button>
        <el-button
                size="mini"
                @click="toComment(scope.$index, scope.row)">评论</el-button>
      </template>
    </el-table-column>
  </el-table>

        </span>
        </el-drawer>

        <!--我的评论折叠栏-->
        <el-drawer
                title="我是标题"
                :visible.sync="drawer2"
                :direction="direction2"
                :before-close="handleClose2">
            <span>我来啦!222</span>
        </el-drawer>
        <!--垂直和水平导航栏-->
        <el-header style="width: 100%;"> <el-menu
                :default-active="activeIndex3"
                class="el-menu-demo"
                mode="horizontal"
                @select="handleSelect"
                background-color="#545c64"
                text-color="#fff"
                active-text-color="#ffd04b">
            <el-menu-item index="1">体育馆场地预约系统</el-menu-item>
            <el-menu-item index="2"   @click="showMyBookMes()">我的预约</el-menu-item>
            <el-menu-item index="4" style="float:right"><a href="adminLogin.jsp" target="_blank" >退出登录</a></el-menu-item>
            <li style="float:right "><h5 style="color: #eeeeee;height: 5px;margin-top: 20px"v-model="user"> {{user.username}},欢迎您！</h5></li>
            <div style="height: 1px;float:right" >
                <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" ></el-avatar>
            </div>
        </el-menu></el-header>
        <el-container>
            <el-aside width="200px"></el-aside>

            <!--所有场地表格-->
            <el-main >
                <el-breadcrumb separator-class="el-icon-arrow-right">
                    <el-breadcrumb-item><a href='User_Wel.html'>首页</a></el-breadcrumb-item>
                    <el-breadcrumb-item>场地详情</el-breadcrumb-item>
                </el-breadcrumb>
                <HR style="FILTER:alpha(opacity=100,finishopacity=0,style=2)" width="84%"color=#FF7F50 SIZE=10 align="left">
                <h2 v-model:detailfield style="margin-left: 500px;font-size:x-large">{{detailfield.fieldname}}</h2>
                <div style="border: dashed 1px grey;width: 84%;height: 50px">
                    <span v-model:detailfield style="margin-left:485px ">负责人：{{detailfield.fieldincharge}}</span>
                </div>
                <h1>一.场地状态</h1>
                <div v-model:detailfield >{{detailfield.fieldstate}} </div>
                <br>
                <br>
                <h1>二.场地位置</h1>
                <div v-model:detailfield >{{detailfield.fieldlocation}} </div>
                <br>
                <br>
                <h1>三.场地信息</h1>
                <div v-model:detailfield >{{detailfield.fieldinformation}} </div>
                <br>
                <br>
                <h1>四.场地图片</h1>
                <div v-model:detailfield ><img :src="'imgs/'+detailfield.fieldpicture"  width="900" height="500" /></div>
                <br>
                <br>
                <div style="width: 84%;">
                <el-divider style="width:50%"><i class="el-icon-mobile-phone">评论</i></el-divider>
                </div>
                <el-tabs type="border-card" style="height:auto;width: 84%">
                    <el-tab-pane label="评论">

                        <el-table
                                :data="commentData"
                                style="width: 100%"
                                :cell-style="columnStyle"
                                :row-style="{height: '40px'}"
                             >
                            <el-table-column
                                    prop="date"
                                    width="50">
                                <el-avatar icon="el-icon-user-solid" ></el-avatar>
                            </el-table-column>
                            <el-table-column
                                    prop="userid"
                                    width="75"
                                    >
                            </el-table-column>
                            <el-table-column
                                    prop="time"
                                    width="180"
                            >
                            </el-table-column>
                            <el-table-column
                                    prop="comment"
                                    >
                            </el-table-column>
                        </el-table>
                    </el-tab-pane>
                    <el-tab-pane label="场地公告">

                        <el-table
                                :data="noticeTableData"
                                style="width: 100%">
                            <el-table-column type="expand">
                                <template slot-scope="props">
                                    <el-form label-position="left" inline class="demo-table-expand">

                                        <el-form-item label="公告详情" >

                                            <span style="font-size: larger;color: black">{{ props.row.information }}</span>
                                        </el-form-item>
                                    </el-form>
                                </template>
                            </el-table-column>
                            <el-table-column
                                    label="发布人"
                                    prop="adminname">
                            </el-table-column>
                            <el-table-column
                                    label="标题"
                                    prop="title">
                            </el-table-column>
                            <el-table-column
                                    label="发布时间"
                                    prop="publishtime">
                            </el-table-column>
                        </el-table>
                    </el-tab-pane>
                </el-tabs>
            </el-main>
        </el-container>
    </el-container>


</div>


<script src="js/vue.js"></script>
<script src="element-ui/lib/index.js"></script>
<script src="js/axios-0.18.0.js"></script>

<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">

<script>
    new Vue({
        el: "#app4",

        mounted(){
            this.getDetailField();
            this.getLoginUser();


        },
        methods: {
            //获得登录的用户
            getLoginUser(){
                var _this=this;
                axios({
                    url:"http://localhost:8080/FieldBookSystem/getUser",
                    method:"get"
                }).then(function (resp){
                    _this.user=resp.data;
                })
            },
            //查看我的预约信息
            showMyBookMes(){
                this.drawer1=true;
                var _this = this;
                axios({
                    url:"http://localhost:8080/FieldBookSystem/selectMyBookMes?userid="+_this.user.userid,
                    method:"get"
                }).then(function (resp){
                    _this.bookFieldTableData=resp.data;
                })

            },
            //我的预约信息使用方法
            handleEnter(index, row) {
                console.log(index, row);
            },
            //去评论
            toComment(index,row){

            },
            //查询所有评论
            selectAllComment(){
                var _this=this;
                axios({
                    url:"http://localhost:8080/FieldBookSystem/selectAllComment?fieldid="+_this.detailfield.fieldid,
                    method:"get"
                }).then(function (resp){
                    _this.commentData=resp.data;
                })
            },
            //查询该场地所有公告
            selectAllNotice(){
                var _this=this;
                axios({
                    url:"http://localhost:8080/FieldBookSystem/selectNoticeByFieldId?fieldid="+_this.detailfield.fieldid,
                    method:"get"
                }).then(function (resp){
                    _this.noticeTableData=resp.data;
                })
            },
            //折叠栏关闭
            handleClose1(done) {
                this.$confirm('确认关闭？')
                    .then(_ => {
                        done();
                    })
                    .catch(_ => {});
            },
            //折叠栏关闭
            handleClose2(done) {
                this.$confirm('确认关闭？')
                    .then(_ => {
                        done();
                    })
                    .catch(_ => {});
            },
            //获得当前场地的详细信息
            getDetailField(){
                var _this=this;
                axios({
                    url:"http://localhost:8080/FieldBookSystem/getDetailField",
                    method:"get"
                }).then(function (resp){
                    _this.detailfield=resp.data;
                    _this.selectAllComment();
                    _this.selectAllNotice();

                })
            },


        },
        data() {
            return {
                noticeTableData: [],
                //评论字体样式
                columnStyle({ row, column, rowIndex, columnIndex }) {
                    var st;
                    if ( columnIndex == 3 ) {

                        return "font-size:1px;color:black";
                    }


                },
                //用户姓名模型
                user:[],
                //我的预约信息模型
                bookFieldTableData: [],
                //评论模型
                commentData: [],
                //详细场地模型
                detailfield:[],
                /*折叠栏模型*/
                drawer1: false,
                direction1: 'btt',
                /**/
                /*折叠栏模型*/
                drawer2: false,
                direction2: 'ltr',
                /**/
            }
        }

    })

</script>

</body>
</html>